<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col">
				<text class="text_1">备注：</text>

				<textarea placeholder="请输入陪签地址和时间安排" maxlength="100" placeholder-class="tlr" class="b-w-h-c"
					v-model="remarks"></textarea>


			</view>
			<text class="text_4">设计图纸上传</text>
			<view class="tips">
				*上传图片最大不能超过6M
			</view>
		</view>
		<view class="flex-col group_2">
			<view class="justify-between">
				<text class="text_5">上传图片格式</text>
				<view class="flex-col text-wrapper_1" @click="go(`/pages/guide/guide?identification=${'sjtz'}`)">
					<text class="text_6">参照模版</text>
				</view>
			</view>
			<view class="group_4">
				<!-- <view class="image_6"> -->
				<shop-upload :maxCount="9" :fileList="fileListSJ" @del="delectPicSJ" @success='successSJ'></shop-upload>
				<!-- </view> -->
			</view>

			<view class="justify-between group_6">
				<text class="text_8">上传文件格式</text>
				<shop-upload-file @uploadEnd="onuploadEnd1">
					<view class="u-flex u-row-right">
						<view class="flex-col items-center text-wrapper_1">
							<!-- 第一个上传文件 -->
							<text class="text_6">上传文件</text>
						</view>
					</view>

				</shop-upload-file>
				<!-- <view class="flex-col items-center text-wrapper_1"><text class="text_6">上传文件</text></view> -->
			</view>
			<view class="flex-row group_7">
				<uni-table ref="table" border stripe emptyText="暂无更多数据">
					<uni-tr style='background-color: rgb(242, 246, 225);'>
						<uni-th align="center">文件名称</uni-th>
						<uni-th align="center">上传时间</uni-th>
						<uni-th align="center">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in designFiles" :key="index">
						<uni-td align="center">{{ item.fileName }}</uni-td>
						<uni-td align="center">
							<view class="name">{{ item.createdTime }}</view>
						</uni-td>
						<uni-td align="center">

							<view class="u-flex u-row-center u-col-center">
								<text class="look" @click="look(item.path)">查看</text>
								<text class="del" @click="del1(index)">删掉</text>

							</view>

						</uni-td>

					</uni-tr>
				</uni-table>
			</view>
			<text class="text_24">
				不限上传格式，但仅支持在线预览word、pdf、excle、jpg格式文件，其他格式的文件请移步pc端预览和下载。
			</text>
		</view>
		<text class="text_4">设计需求说明完善资料</text>
		<view class="flex-col group_2">
			<view class="justify-between">
				<text class="text_5">上传图片格式</text>
				<view class="flex-col items-center text-wrapper_1"
					@click="go(`/pages/guide/guide?identification=${'sjxqsm'}`)">
					<text class="text_6">参照模版</text>
				</view>
			</view>
			<view class="group_4">
				<!-- <view class="image_6"> -->
				<shop-upload :maxCount="9" :fileList="fileListXQ" @del="delectPicXQ" @success='successXQ'></shop-upload>
				<!-- </view> -->
			</view>
			<view class="justify-between group_6">
				<text class="text_8">上传文件格式</text>

				<shop-upload-file @uploadEnd="onuploadEnd2">
					<view class="u-flex u-row-right">
						<view class="flex-col items-center text-wrapper_1">
							<!-- 第二个上传文件 -->
							<text class="text_6">上传文件</text>
						</view>
					</view>
				</shop-upload-file>
				<!-- 	<lsj-upload
				    class="upload"
					ref="lsjUpload"
					childId="upload1"
					:width="width"
					:height="height"
					:option="option"
				     @uploadEnd="onuploadEnd2"
					>
					</lsj-upload> -->
			</view>
			<view class="flex-row group_7">
				<uni-table ref="table" stripe emptyText="暂无更多数据">
					<uni-tr style='background-color: rgb(242, 246, 225);'>
						<uni-th width="150" align="center">文件名称</uni-th>
						<uni-th width="150" align="center">上传时间</uni-th>
						<uni-th width="204" align="center">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in illustrateFiles" :key="index">
						<uni-td align="center">{{ item.fileName }}</uni-td>
						<uni-td align="center">
							<view class="name">{{ item.createdTime }}</view>
						</uni-td>
						<uni-td align="center">

							<view class="u-flex u-row-center u-col-center">
								<text class="look" @click="look(item.path)">查看</text>
								<text class="del" @click="del2(index)">删掉</text>

							</view>

						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<text class="text_24">
				不限上传格式，但仅支持在线预览word、pdf、excle、jpg格式文件，其他格式的文件请移步pc端预览和下载。
			</text>
		</view>

		<view class="flex-col group_15">
			<view class="flex-col group_16">
				<text class="text_29">设计图纸</text>
				<view class="flex-col group_17" v-if="fileListSJ.length>0">

					<view class="flex-row u-flex-wrap ">
						<image v-for="(item,index) in fileListSJ " :key="index" @click="prview(index,fileListSJ)"
							:src="item.url" class="image_1 " />

					</view>

				</view>
				<view class="" v-else>
					<u-empty mode="data"></u-empty>
				</view>
			</view>
			<view class="flex-col group_16">
				<text class="text_29">设计需求说明</text>
				<view class="flex-col group_17" v-if="fileListXQ.length>0">
					<view class="flex-row u-flex-wrap ">
						<image v-for="(item,index) in fileListXQ " :key="index" @click="prview(index,fileListXQ)"
							:src="item.url" class="image_1 " />
					</view>
				</view>
				<view class="" v-else>
					<u-empty mode="data"></u-empty>
				</view>
			</view>
			<view class="fixed">
				<view class="flex-col button" @click="save"><text class="text_30 ">保存</text>
				</view>
			</view>
		</view>
		<mumu-previewOffce :fileUrl='fileUrl' v-model='showPreview'></mumu-previewOffce>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				showPreview: false,
				fileUrl: '',
				designFiles: [],
				illustrateFiles: [],
				intro: {
					rules: {
						name: [
							// 对name字段进行长度验证
							{
								min: 5,
								message: '简介不能少于5个字',
								trigger: 'change'
							},
							// 对name字段进行必填验证
							{
								required: true,
								message: '请填写姓名',
								trigger: ['change', 'blur']
							},
						]
					}
				},
				remarks: '',
				status: '',
				tableData: [],
				ordersId: '',
				fileListSJ: [],
				fileListXQ: [],
				designId: ''
			};
		},
		onLoad(option) {
			if (option.designId && option.orderid) {
				this.designId = option.designId;
				this.ordersId = option.orderid;
			} else {
				this.$u.toast('参数异常');
				return;
			}
		},
		created() {
			this.getdataT()

		},
		methods: {
			// 第一个上传文件方法
			onuploadEnd1(data) {

				this.designFiles.push({
					fileName: data.name,
					path: data.path,
					createdTime: new Date().toLocaleDateString()
				});
			},
			// 第二个上传文件方法
			onuploadEnd2(data) {
				this.illustrateFiles.push({
					fileName: data.name,
					path: data.path,
					createdTime: new Date().toLocaleDateString()
				});

			},
			// 删除上传的文件
			del1(idx) {
				this.designFiles.findIndex((item, index) => {
					if (idx === index) {
						this.designFiles.splice(index, 1);
					}
				})
			},
			//删除第二个上传文件中的数据
			del2(idx) {
				this.illustrateFiles.findIndex((item, index) => {
					if (idx === index) {
						this.illustrateFiles.splice(index, 1);
					}
				})
			},
			look(url) {
				let arr = url.split('.');
				let end = arr[arr.length - 1];

				if (end == 'jpg' || end == 'png' || end == "jpeg" || end == "gif") {
					uni.previewImage({
						current: 1,
						urls: [url],
						longPressActions: {

							success: function(data) {
								// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							},
							fail: function(err) {
								// console.log(err.errMsg);
							}
						}
					});
				} else {
					this.showPreview = true;
					this.fileUrl = url;
				}

			},
			delectPicXQ(index) {
				this.fileListXQ.splice(index, 1);
			},
			delectPicSJ(index) {
				this.fileListSJ.splice(index, 1);
			},
			successXQ(file) {
				console.log('撒',file);
				if (file.size > 1024 * 6000) {
					uni.showToast({
						title: "图片过大,请更换图片后重新上传!",
						icon: "none",
						duration: 1500,
					})
					
				} else {
					this.fileListXQ.push({
						url: file.url
					})
					// console.log(this.fileListXQ,'fileListXQ');
				}

			},
			successSJ(file) {
				
				if (file.size > 1024 * 6000) {
					uni.showToast({
						title: "图片过大,请更换图片后重新上传!",
						icon: "none",
						duration: 1500
					})
				
				} else {
					this.fileListSJ.push({
						url: file.url
					})
					// console.log(this.fileListSJ,'fileListSJ');
				}

			},
			onprogress(e) {
				// console.log(e);
			},
			onChange(e) {
				// console.log(e);
			},
			upload() {
				// name=指定文件名，不指定则上传所有type等于waiting和fail的文件
				// console.log(this.$refs);
				this.$refs.lsjUpload.upload();
			},
			save() {
				// if (this.fileListSJ.length == 0) {
				// 	this.$u.toast('请上传设计图纸');
				// 	return;
				// }
				if(this.designFiles.length === 0) {
					return this.$u.toast('请上传设计资料文件!')
				}
				if(this.illustrateFiles.length === 0) {
					return this.$u.toast('请上传设计需求资料文件!')
				}
				// if (this.fileListXQ.length == 0) {
				// 	this.$u.toast('请上传需求图纸');
				// 	return;
				// }
				let arrSJ = [];
				let arrXQ = [];
				let overviewConstructionUrlSJ = []
				this.fileListSJ.map(item => {
					let arr = item.url.split('/')
					arrSJ.push({
						fileName: arr[arr.length - 1],
						path: item.url
					})
				});
				this.fileListXQ.map(item => {
					let arr = item.url.split('/')
					arrXQ.push({
						fileName: arr[arr.length - 1],
						path: item.url
					})
				});




				this.$http('explan.saveDesignDrawings', {
					designId: this.designId,
					orderId: this.ordersId,
					designDrawings: arrSJ,
					designIllustrates: arrXQ,
					remark: this.remarks,
					designFiles: this.designFiles,
					illustrateFiles: this.illustrateFiles
				}).then(res => {
					// console.log(res,'res')
					if (res.code == 200) {
						this.updateOrdersStatus()
						// uni.redirectTo({
						// 	url:'/pages/my/order/orderDetail?ordersId='+this.ordersId
						// })
						let pageNum = 2
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - pageNum]; // 前一个页面
						// console.log(beforePage);
						uni.navigateBack({
							success: function() {
								setTimeout(()=>{
									uni.showToast({
										title:'保存成功',
										icon:'success'
									})
								})
								beforePage.$vm.init();
							}

						});

					} else {

					}
				});
			},
			updateOrdersStatus() {
				this.$http('mine.updateOrdersStatus', {
					ordersId: this.ordersId,
					ordersStatus: '3'
				}).then(res => {
					if (res.code == 200) {

					}
				})
			},
			prview(i, url) {
				let urls = [];
				url.map(item => {
					urls.push(item.url);
				})
				uni.previewImage({
					current: i,
					urls: urls,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							// console.log(err.errMsg);
						}
					}
				});
			},

			getdataT() {
				this.$http('oteherL.getSJSH', {
					designId: this.designId,
				}).then(res => {
					// console.log(res);
					if (res.code == 200) {
						this.remarks = res.data.remark;
						if (res.data.designDrawings) {
							let design = [];
							res.data.designDrawings.map(it => {
								design.push({
									url: it.path
								})
							});
							this.fileListSJ = design;
							console.log(this.fileListSJ);
						}
						if (res.data.designIllustrates) {
							let design = [];

							res.data.designIllustrates.map(it => {
								design.push({
									url: it.path
								})
							});
							this.fileListXQ = design;
						}
						if (res.data.designFiles) {
							let file = []
							res.data.designFiles.map(it => {
								let date = new Date(it.upDate);
								file.push({
									fileName: it.fullName,
									path: it.path,
									createdTime: date.getFullYear() + '/' + date.getMonth() + "/" +
										date.getDay()
								})
							})
							this.designFiles = file;
							console.log(this.designFiles);
						}
						if (res.data.illustrateFiles) {
							let file = []
							res.data.illustrateFiles.map(it => {
								let date = new Date(it.upDate);
								file.push({
									id: it.id,
									fileName: it.fullName,
									path: it.path,
									createdTime: date.getFullYear() + '/' + date.getMonth() + "/" +
										date.getDay()
								})
							})
							this.illustrateFiles = file;
						}
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.tips {
		font-size: 24rpx;
		color: red;
		padding: 10rpx 0;
	}

	.tlr {
		margin-left: 10rpx;
		letter-spacing: 1rpx;
	}

	.b-w-h-c {
		padding: 10rpx;
		letter-spacing: 3rpx;
		margin: 10px 0 0 0;
		border: 1px #f0f0f0 solid;
		width: 96%;
		height: 120px;
		border-radius: 10px;
	}

	.upload {
		display: flex;
		justify-content: flex-end;
		flex: 1;
	}

	.look {
		font-size: 24rpx;
		margin-right: 20rpx;
		color: #45538C;
		font-weight: bold;
	}

	.del {
		font-size: 24rpx;
		margin-right: 20rpx;
		color: #C0665B;
		font-weight: bold;
	}

	.fixed {

		position: fixed;
		bottom: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 100;
		width: 100vw;
		height: 120rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;

		.button {
			width: 343px;
			height: 44px;
			background-color: #1d6aff;
			border-radius: 22px;
		}

	}

	.group_4 {
		margin-top: 12px;
		padding-top: 5px;
		position: relative;
	}

	.text-wrapper_1 {
		border-radius: 12px;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836673700205288.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 62px;
		height: 20px;
	}

	.group_5 {
		padding-top: 5px;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 112px;
	}

	.image_1 {
		border-radius: 8px;
		width: 30%;
		height: 107px;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
	}

	.image_4 {
		width: 16px;
		height: 16px;
		position: absolute;
		right: 0;
		top: 0;
	}

	.text-wrapper_6 {
		margin-left: 69px;
		margin-bottom: 3px;
		width: 54.5px;
	}

	.text_6 {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #1d6aff;
		font-size: 11px;
		font-family: '.AppleSystemUIFont';
	}

	.text_19 {
		color: #1c4ca8;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.image_2 {
		margin-right: 5px;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		padding: 10px;
		padding-bottom: 120rpx;
	}

	.group {
		padding: 15px 0px;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.group_2 {
		margin-top: 20px;
	}

	.group_10 {
		margin-top: 27.5px;
	}

	.group_12 {
		margin-top: 24px;
		border-top: solid 0.5px #eeeeee;
	}

	.text_1 {
		align-self: flex-start;
		color: #191919;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
	}

	.text-wrapper {
		margin-top: 17.5px;
		padding: 11.5px 0 83px;
		border-radius: 8px;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836773679201388.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.text_3 {
		margin-top: 10px;
		color: #ff371d;
		font-size: 11px;
		font-family: '.AppleSystemUIFont';

	}

	.divider {
		margin-top: 19.5px;
		background-color: #eeeeee;
		border-radius: 0.25px;
		height: 0.5px;
	}

	.text_4 {
		margin-top: 14.5px;
		align-self: flex-start;
		color: #191919;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		font-weight: 600;
	}

	.group_6 {
		margin-top: 19px;
	}

	.group_7 {
		margin-top: 16px;

		position: relative;
	}

	.text_24 {
		margin-top: 12px;
		color: #1c4ca8;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		text-align: left;
	}

	.text_27 {
		margin-top: 12px;
		color: #1c4ca8;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		text-align: left;
	}

	.group_13 {
		padding: 14.5px 0 16px;
		border-bottom: solid 0.5px #eeeeee;
	}

	.group_15 {
		padding-bottom: 16px;
	}

	.text_2 {
		margin-left: 12.5px;
		color: #bfbfbf;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';

	}

	.text_5 {
		margin-bottom: 4.5px;
		color: #191919;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.image_6 {
		width: 107px;
		height: 107px;
	}

	.text_8 {
		margin-bottom: 4.5px;
		color: #191919;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.section_1 {
		padding: 9.5px 30px 13.5px;
		border-radius: 2px 2px 0 0;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836673727744564.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}

	.section_2 {
		padding: 10.5px 14.5px 12.5px;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836674161259069.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 0;
		right: 0;
		top: 35.5px;
	}

	.section_3 {
		padding: 10.5px 21.5px 12.5px;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836674161259069.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 0;
		right: 0;
		top: 75px;
	}

	.image_7 {
		width: 91.4667vw;
		height: 0.1333vw;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.section_4 {
		padding: 10.5px 21.5px 12.5px;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836674161259069.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 0;
		right: 0;
		top: 114.5px;
	}

	.section_5 {
		background-color: #d9d9d9;
		width: 0.5px;
		height: 154.5px;
		position: absolute;
		left: 95.5px;
		top: 0;
	}

	.section_6 {
		background-color: #d9d9d9;
		width: 0.5px;
		height: 154.5px;
		position: absolute;
		right: 111.5px;
		top: 0;
	}

	.text_25 {
		margin-bottom: 4.5px;
		color: #191919;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.image-wrapper {
		padding: 37.5px 0;
		border-radius: 8px;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836668255361557.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 107px;
	}

	.text_28 {
		align-self: flex-start;
		color: #191919;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
	}

	.group_14 {
		margin-top: 17px;
	}

	.group_16 {
		padding: 14.5px 0 28px;
	}

	.button {
		width: 686rpx;
		height: 88rpx;
		background-color: #1d6aff;
		border-radius: 22px;

	}

	.text_12 {
		margin-right: 15px;
		color: #666666;
		font-size: 11px;
		font-family: '.AppleSystemUIFont';
	}

	.text-wrapper_2 {
		margin-top: 3px;
	}

	.text-wrapper_3 {
		margin-left: 48px;
		margin-top: 3px;
		width: 68px;
	}

	.group_9 {
		margin-left: 54.75px;
		margin-bottom: 3px;
	}

	.text-wrapper_4 {
		margin-top: 3px;
	}

	.text-wrapper_5 {
		margin-left: 60.5px;
		margin-top: 3px;
	}

	.text-wrapper_7 {
		margin-top: 3px;
	}

	.text-wrapper_8 {
		margin-left: 60.5px;
		margin-top: 3px;
	}

	.image_10 {
		width: 32px;
		height: 32px;
	}

	.image_14 {
		margin-top: 12px;
		align-self: flex-start;
	}

	.text_29 {
		align-self: flex-start;
		color: #191919;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
	}

	.group_17 {
		margin-top: 17px;
	}

	.text_30 {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
	}

	.text_10 {
		color: #666666;
		font-size: 11px;
		font-family: '.AppleSystemUIFont';
	}

	.text_11 {
		margin-left: 67px;
		color: #666666;
		font-size: 11px;
		font-family: '.AppleSystemUIFont';
	}

	.text_13 {
		margin-left: 7px;
		margin-right: 6.5px;
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_14 {
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_15 {
		color: #1c4ca8;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_16 {
		margin-left: 20px;
		color: #ff371d;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_17 {
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_18 {
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_21 {
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_22 {
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.image_11 {
		flex: 1 1 107px;
	}

	.image_12 {
		margin-left: 11px;
		flex: 1 1 107px;
	}

	.image_13 {
		margin-left: 11px;
		flex: 1 1 107px;
	}

	.image_18 {
		margin-top: 12px;
		align-self: flex-start;
	}

	.image_15 {
		flex: 1 1 107px;
	}

	.image_16 {
		margin-left: 11px;
		flex: 1 1 107px;
	}

	.image_17 {
		margin-left: 11px;
		flex: 1 1 107px;
	}
</style>
